<template>
	<view class="container">
		<view class="hospital-banner">
			<image :src="hospitalDetail.imgUrl" mode="aspectFill"></image>
			<view class="hospital-basic-info">
				<view class="hospital-name">{{ hospitalDetail.name }}</view>
				<view class="hospital-grade">{{ hospitalDetail.grade }}</view>
				<view class="hospital-tags">
					<text class="tag" v-for="tag in hospitalDetail.tags" :key="tag">{{ tag }}</text>
				</view>
			</view>
		</view>

		<view class="hospital-info-card">
			<view class="card-item">
				<uni-icons type="location" size="20"></uni-icons>
				<text class="item-title">医院地址</text>
				<text class="item-content">{{ hospitalDetail.address }}</text>
			</view>
			<view class="card-item">
				<uni-icons type="phone" size="20"></uni-icons>
				<text class="item-title">联系电话</text>
				<text class="item-content">{{ hospitalDetail.phone }}</text>
			</view>
			<view class="card-item">
				<uni-icons type="calendar" size="20"></uni-icons>
				<text class="item-title">门诊时间</text>
				<text class="item-content">{{ hospitalDetail.clinicHours }}</text>
			</view>
		</view>

		<view class="department-tabs">
			<scroll-view scroll-x="true" class="scroll-x">
				<view class="tab-item" :class="{ active: currentDeptTab === item.id }"
					v-for="(item, index) in deptCategoryList" :key="index" @click="switchDeptTab(item.id)">
					{{ item.name }}</view>
			</scroll-view>
		</view>

		<view class="department-list">
			<view class="dept-item" v-for="dept in filteredDeptList" :key="dept.id" @click="goToDoctorList(dept.id)">
				<view class="dept-name">{{ dept.name }}</view>
				<view class="dept-info">
					<text class="dept-doctor-count">{{ dept.doctorCount }}位医生</text>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HOSPITAL_LIST,
		DEPARTMENT_LIST
	} from '@/config.js'
	export default {
		data() {
			return {
				hospitalId: 1,
				hospitalDetail: {},
				currentDeptTab: 1,
				departmentList: DEPARTMENT_LIST
			}
		},
		computed: {
			deptCategoryList() {
				return this.departmentList.map(item => ({id: item.id, name: item.name}))
			},
			filteredDeptList() {
				if (this.currentDeptTab === 1) {
					return this.departmentList;
				} else {
					return this.departmentList.filter(dept => dept.categoryId === this.currentDeptTab);
				}
			}
		},
		onLoad(options) {
			// 这里可以根据传递的id加载对应医院详情
			if (options.id) this.hospitalId = options.id
			this.hospitalDetail = HOSPITAL_LIST.find(item => item.id == this.hospitalId)
		},
		methods: {
			switchDeptTab(index) {
				this.currentDeptTab = index;
			},
			goToDoctorList(deptId) {
				uni.navigateTo({
					url: `/pages/doctorList/doctorList?hospitalId=${this.hospitalDetail.id}&deptId=${deptId}`
				});
			}
		}
	}
</script>

<style>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		height: 100%;
	}

	.container {
		background-color: #f5f5f5;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
	}

	.hospital-banner {
		position: relative;
	}

	.hospital-banner image {
		width: 100%;
		height: 200px;
	}

	.hospital-basic-info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	}

	.hospital-name {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		margin-bottom: 5px;
	}

	.hospital-grade {
		font-size: 14px;
		color: #fff;
		margin-bottom: 5px;
	}

	.hospital-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.hospital-tags .tag {
		font-size: 12px;
		color: #fff;
		background-color: rgba(255, 255, 255, 0.3);
		padding: 2px 5px;
		border-radius: 3px;
		margin-right: 5px;
		margin-bottom: 3px;
	}

	.hospital-info-card {
		background-color: #fff;
		margin: 10px;
		border-radius: 8px;
		padding: 10px 0;
	}

	.card-item {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
	}

	.card-item:last-child {
		border-bottom: none;
	}

	.card-item .iconfont {
		color: #1677ff;
		font-size: 18px;
		width: 25px;
	}

	.item-title {
		width: 80px;
		font-size: 14px;
		color: #333;
		margin-left: 10rpx;
	}

	.item-content {
		flex: 1;
		font-size: 14px;
		color: #666;
	}

	.department-tabs {
		background-color: #fff;
		margin-top: 10px;
	}

	.department-tabs .scroll-x {
		white-space: nowrap;
	}

	::v-deep .uni-scroll-view .uni-scroll-view {
		padding: 10px 0;
	}

	.department-tabs .tab-item {
		display: inline-block;
		padding: 8px 15px;
		margin: 0 5px;
		border-radius: 20px;
		font-size: 14px;
		background-color: #f5f5f5;
	}

	.department-tabs .tab-item.active {
		background-color: #1677ff;
		color: #fff;
	}

	.department-list {
		padding: 10px;
	}

	.dept-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dept-name {
		font-size: 16px;
		font-weight: bold;
	}

	.dept-info {
		display: flex;
		align-items: center;
	}

	.dept-doctor-count {
		font-size: 12px;
		color: #666;
		margin-right: 10px;
	}
</style>